<template>
    <div>
        <Form :label-width="80" inline>
            <FormItem label="课程名字">
                <Input @on-clear="getAllTimetable" v-model="param.name" clearable class="myform"/>
                <Button icon="ios-search" type="success" @click="getAllTimetable" class="btn">查询</Button>
            </FormItem>
        </Form>
        <Row>
            <Col span="2">
                <Button class="mybtn1" icon="md-add-circle" @click="modal.addTimetableFlag = true" type="info">添加</Button>
            </Col>
            <Col span="2">
                <Button style="margin-left: -40px" class="mybtn1" icon="md-cloud-upload" @click="" type="info">导出数据</Button>
            </Col>
            <Col span="2">
                <!--<Button class="mybtn1" icon="md-cloud-download" @click="" type="primary">模板下载</Button>-->
                <download-excel
                        class = "export-excel-wrapper"
                        :data = "json_data"
                        :fields = "json_fields"
                        name = "学院信息表.xls">
                    <Button style="margin-left: -50px" class="mybtn1" icon="md-cloud-download" type="primary">模板下载</Button>
                </download-excel>
            </Col>
            <Col span="2">
                <Button style="margin-left: -60px" class="mybtn1" icon="md-cloud-download" @click="modalUpload.modalUploadFlag = true" type="primary">导入数据</Button>
            </Col>
        </Row>
        <Table border :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="action">
                <Button icon="ios-build" type="primary" size="small" style="margin-right: 5px" @click="modalEdit.editTimetableFlag = true,Object.assign(modalEdit.course,row)">编辑</Button>
                <Button icon="md-trash" type="error" size="small" @click="remove(row,index)">删除</Button>
            </template>
        </Table>
        <Page :total="total" :page-size="param.size" @on-change="changePage" @on-page-size-change="changePageSize"
              show-sizer show-total show-elevator transfer/>
        <add-timetable :modal="modal"/>
        <edit-timetable :modal="modalEdit"/>
        <edit-class :modal="modalClass"/>
        <uploda-modal :modal="modalUpload" @changeStatus="getAllTimetable"/>
    </div>
</template>

<script>
    import addTimetable from "../../components/modal/basicData/addTimetable";
    import editTimetable from "../../components/modal/basicData/editTimetable";
    import editClass from "../../components/modal/basicData/editClass";
    import uplodaModal from "../../components/modal/basicData/uplodaModal";

    export default {
        components:{
            addTimetable,
            editTimetable,
            editClass,
            uplodaModal
        },
        data() {
            return {
                modal:{
                    addTimetableFlag:false,
                    list:[],
                },
                modalUpload:{
                    modalUploadFlag:false,
                    url:"/course/uplodaExcl"
                },
                modalEdit:{
                    editTimetableFlag:false,
                    course:{},
                    list:[],
                },
                modalClass:{
                  editClassFlag:false,
                  course:{}
                },
                total:0,
                param:{
                    page:1,
                    size:10,
                    name:'',
                },
                columns: [
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '课程代码',
                        sortable:true,
                        key: 'code'
                    },
                    {
                        title: '开课学院',
                        sortable:true,
                        key: 'collegeName'
                    },
                    {
                        title: '开课系',
                        sortable:true,
                        key: 'department'
                    },
                    {
                        title: '年级',
                        sortable:true,
                        key: 'grade'
                    },
                    {
                        title: '课程名称',
                        sortable:true,
                        //key:'name'
                        render: (h, params) => {
                            if (!params.row.name) {
                                return <span>{"/"}</span>
                            } else {
                                return <a onClick={()=>{this.editClass(params.row)}}>{params.row.name}</a>
                            }
                        }
                    },
                    {
                        title: '学时',
                        sortable:true,
                        key: 'period'
                    },
                    {
                        title: '学分',
                        sortable:true,
                        key: 'point'
                    },
                    {
                        title: '状态',
                        sortable:true,
                        key: 'status'
                    },
                    {
                        title: '备注',
                        sortable:true,
                        key: 'remark'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [],
                assignData:[] //克隆用
            }
        },
        methods: {
            /**
             * 点击下一页
             * @param val
             */
            changePage(val) {
                this.param.page = val
                this.getAllTimetable()
            },
            /**
             * 切换   分页的每页显示条数
             * @param val
             */
            changePageSize(val) {
                this.param.size = val
                if (this.param.page === 1) {
                    this.getAllTimetable()
                }
            },
            /**
             * 删除
             */
            remove(row,index) {
                this.http.delete(`/course/deleteCourseById/${row.courseId}`).then(res =>{
                    console.log(row.courseId);
                    if(res){
                        this.$Message.success('删除成功！')
                        this.data.splice(index, 1);
                    }
                })

            },
            editClass(row){
                this.modalClass.editClassFlag =true
                this.modalClass.course = row

            },
            /**
             * 获取所有学院信息
             */
            async getAllCollege(){
                await this.http.get('/college/getAllCollegewithNopamrm').then(res=>{
                    this.modal.list = res.data;
                    this.modalEdit.list = res.data;
                })
            },
            /**
             * 获取全部
             */
            getAllTimetable(){
                this.http.post("/course/getAllCourse",this.qs.parse(this.param)).then(res=>{
                    if (res.data) {
                        this.data = res.data.list.map(m => {
                            m.editFlag = false
                            return m
                        })
                        this.total = res.data.total
                    }
                })
                console.log(this.data)
            },
            /**
             * 保存更新
             */
            saveUpdateTimetable(row){
                let collegeDo = row;
                console.log(collegeDo);
                this.http.post("/college/saveUpdateCollege", this.qs.parse(collegeDo)).then(res => {
                    if (res) {
                        this.$Message.success("修改成功")
                    }
                })
            },
        },
        created() {
            this.getAllCollege()
            this.getAllTimetable()
        }

    }
</script>

<style scoped>
    .myform {
        width: 300px;
    }

    .btn {
        margin-left: 10px;
    }
</style>
